<?php
/**
 * Created by PhpStorm.
 * Author: QinShuai
 * Email: qinshuai0423@qq.com
 * Date: 2021/6/11
 */


/* @var $this yii\web\View */
/* @var $tableData */
/* @var $select */
$controller = $this->context->id;
?>
<div class="index">
    <!--按钮-->
    <div class="button">
        <el-row>
            <el-button type="success" size="middle" @click="handleAdd">添加</el-button>
        </el-row>
    </div>

    <div class="content">
        <template>
            <div>
                <el-table
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="225">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="路由"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status=='1'">启用</span>
                            <span v-else>禁用</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDeleteConfirm(scope.$index, scope.row)">删除</el-button>
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="handleAddChildRule(scope.$index, scope.row)">添加子菜单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--编辑-->
            <el-dialog
                    title="添加/编辑"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item hidden>
                        <el-input v-model="form.id"></el-input>
                    </el-form-item>
                    <el-form-item  label="父级菜单：">
                        <el-select v-model="form.pid"  placeholder="请选择">
                            <el-option
                                    v-for="item in select"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.id"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜单名称：">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="icon：">
                        <el-input v-model="form.icon"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路由：">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="排序：">
                        <el-input v-model="form.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="节点类型：">
                        <el-radio-group v-model="form.type" size="small">
                            <el-radio-button label="1">控制器</el-radio-button>
                            <el-radio-button label="0">方法</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-radio-group v-model="form.status">
                            <el-radio label="1">启用</el-radio>
                            <el-radio label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
            </el-dialog>
        </template>
    </div>
</div>
<?php $this->beginBlock('js'); ?>
<script>
    let id = 1000;
    App = {
        data: {
            select:[],
            form: {
                id:'',
                pid:'0',
                title:'',
                name:'',
                sort:'',
                status:'',
                type:'',
                remark:'',
                icon:''
            },
        },
        methods: {
            handleAddChildRule(index, row){
                this.handleAdd();
                this.afterHandleAdd();
                this.form.pid = row['id']
            },
            afterHandleAdd(){
                this.form.type = '1';
                this.form.status = '1';
            },
            handleDelete: function (index, row) {
                let that = this;
                let data = {ids: row.id}
                let url = "/<?=$controller?>/delete";
                $request.post(url, data, function (res) {
                    if (res.status == 200 && res.data.code == '0') {
                        that.init();
                        that.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: '删除失败',
                            type: 'error'
                        });
                    }

                })
            },
        },
        mounted(){
            this.init();
        }
    }
</script>
<?php $this->endBlock(); ?>
